<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>  

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>展览管理</title>
    <c:set var="contextPath" value="${pageContext.request.contextPath}" scope="request"/>
	<link rel="stylesheet" href="${contextPath}/static-resources/css/index.css"/>
	<script src="${contextPath}/static-resources/jquery-1.12.1.js"></script>
	<script src="${contextPath}/static-resources/js/index.js"></script>
	
	<link rel="stylesheet" type="text/css" href="${contextPath}/static-resources/themes/material/easyui.css">
	<link rel="stylesheet" type="text/css" href="${contextPath}/static-resources/themes/icon.css">
	<script type="text/javascript" src="${contextPath}/static-resources/jquery.min.js"></script>
	<script type="text/javascript" src="${contextPath}/static-resources/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#tree').tree({
				onDblClick: function(node){
					
				}
			});
			
			$('#exhibitionTable').datagrid({
				onDblClickRow: function(index,row){
					console.log(row.logo);
					$('#img').prop('src', row.logo);
					$('#showImgWin').window('open');
				}
			});
		})

		function loadExhibitionGrid(params, success, error) {
			console.log(params);
		}
		
		function openAddExhibitionWin(data){
			$('#addExhibitionWin').window('open'); 
			$('#category').combotree('reload');
			console.log(data);
			if(data){
				console.log(data);
				$('#addExhibitionWin').window('setTitle', '修改展览');
				$('#id').val(data.id);
				
				var categoryIds = [];
				for(var i=0; i<data.categorys.length; i++){
					categoryIds[i] = data.categorys[i].id;
				}
				$('#category').combotree('setValues', categoryIds);
				$('#exhibitionName').textbox('setValue', data.name);
				$('#authors').textbox('setValue', data.authors);
				$('#address').textbox('setValue', data.address);
				$('#exhibitionDescription').textbox('setValue', data.description);
				$('#flag').textbox('setValue', data.flag);
				$('#logo').filebox('setText', data.logo);
				var fileInputId = '#' + $('#logo').next().find('input[type="file"]').attr("id");
				$(fileInputId).val(null);
				
				$('#zindex').numberspinner('setValue', data.zindex);
				$('#visible').switchbutton(data.visible ? 'check' : 'uncheck');
			}else{
				$('#addExhibitionWin').window('setTitle', '添加展览');
				$('#id').val('');
				$('#category').combotree('setValues', []);
				$('#exhibitionName').textbox('setValue', '');
				$('#authors').textbox('setValue', '');
				$('#address').textbox('setValue', '');
				$('#exhibitionDescription').textbox('setValue', '');
				$('#flag').textbox('setValue', '');
				$('#logo').filebox('setText', '');
				var fileInputId = '#' + $('#logo').next().find('input[type="file"]').attr("id");
				$(fileInputId).val(null);
				
				$('#zindex').numberspinner('setValue', '');
				$('#visible').switchbutton('check');
			}
		}
		
		function openUpdateExhibitionWin(){
			var row = $('#exhibitionTable').datagrid('getSelected');
			if (!row) {
				showWarn('请选择要修改的数据');
				return;
			}
			
			openMask();
			$.ajax({
				type : "POST",
				url : '${contextPath}/exhibition/findOne.do',
				data : {"id" : row.id},
				success : function(data) {
					if (data.status) {
						closeMask();
						openAddExhibitionWin(data.data);
					} else {
						showError(data.message);
					}
					closeMask();
				},
				error : function() {
					showError('系统异常');
					closeMask();
				}
			});
		}
		
		function saveExhibition(dataObj){
			openMask();
			$.ajax({
				type : "POST",
				url : '${contextPath}/exhibition/save.do',
				enctype : 'multipart/form-data',
				data : dataObj,
				success : function(data) {
					if (data.status) {
						$('#addExhibitionWin').window('close');
						$('#exhibitionTable').datagrid('reload');
					} else {
						showError(data.message);
					}
					closeMask();
				},
				error : function() {
					showError('系统异常');
					closeMask();
				}
			});
			
		}

		function addExhibition() {
			var id = $('#id').val();
			var categoryIds = $('#category').combotree('getValues');
			var name = $('#exhibitionName').textbox('getValue');
			var authors = $('#authors').textbox('getValue');
			var address = $('#address').textbox('getValue');
			var description = $('#exhibitionDescription').textbox('getValue');
			var flag = $('#flag').textbox('getValue');
			var fileInputId = $('#logo').next().find('input[type="file"]').attr("id");
			var file = document.getElementById(fileInputId).files[0];
			var zindex = $('#zindex').numberspinner('getValue');
			var visible = $('#visible').prop('checked');
			if (!name) {
				showInfo("展览名称不能为空");
				return;
			}
			if (!categoryIds) {
				showInfo("展览分类不能为空");
				return;
			}
			if (!fileInputId) {
				showInfo("logo不能为空");
				return;
			}
			
			var dataObj = new Object();
			dataObj.categoryIds = categoryIds;
			dataObj.name = name;
			dataObj.authors = authors;
			dataObj.address = address;
			dataObj.description = description;
			dataObj.flag = flag;
			dataObj.zindex = zindex;
			dataObj.id = id;
			dataObj.visible = visible;

			if(file){
	 			var reader = new FileReader();
				reader.onload = function(e) {
					var base64stream = this.result;
					dataObj.fileName = file.name;
					dataObj.base64stream = base64stream;
					saveExhibition(dataObj);
				};
				reader.readAsDataURL(file);
			}else{
				saveExhibition(dataObj);
			}
		}

		// 添加分类
		function addCategory() {
			var name = $('#categroyName').val();
			var parent = $('#parent').combotree('getValue');
			var description = $('#description').val();
			var hot = $('#hot').prop('checked');
			if (name.length <= 0) {
				showWarn('分类名称不能为空');
				return;
			}
			$.ajax({
				type : "POST",
				url : '${contextPath}/category/add.do',
				data : {
					"name" : name,
					"parent" : parent,
					"description" : description,
					"hot" : hot
				},
				success : function(data) {
					console.log(data);
					console.log(data.status);
					if (data.status) {
						$('#addCategoryWin').window('close');
						$('#tree').tree('reload');
					} else {
						showError(data.message);
					}
				},
				error : function() {
					showError('系统异常');
				}
			});
		}
		function openCategoryAddWin() {
			//var parentNode = $('#tree').tree('getSelected');
			//if(!parentNode){
			//	$("#parentDiv").hide();
			//}else {
			//	$("#parentDiv").show();
			//	$('#parent').textbox('setValue', parentNode.text);
			//}
			$('#addCategoryWin').window('open');
		}
		
		function removeExhibition(){
			var row = $('#exhibitionTable').datagrid('getSelected');
			if (!row) {
				showWarn('请选择要删除的数据');
				return;
			}
			confirm('确定删除选择数据?', function(){
				openMask();
				$.ajax({
					type : "POST",
					url : '${contextPath}/exhibition/delete.do',
					data : {"id" : row.id},
					success : function(data) {
						if (data.status) {
							closeMask();
							$('#exhibitionTable').datagrid('reload');
						} else {
							showError(data.message);
						}
						closeMask();
					},
					error : function() {
						showError('系统异常');
						closeMask();
					}
				});				
			}, function(){
				return;
			})
		}
		
		function deleteCategory() {
			var parentNode = $('#tree').tree('getSelected');
			if (parentNode) {
				confirm('确认删除该条记录?', function ok() {
					$.ajax({
						type : "POST",
						url : '${contextPath}/category/remove.do',
						data : {
							"id" : parentNode.id
						},
						success : function(data) {
							if (data.status) {
								$('#tree').tree('reload');
							} else {
								showError(data.message);
							}
						},
						error : function() {
							showError('系统异常');
						}
					});
				});
			}
		}
	</script>
</head>
<body style="height: 100%;">
	<div class="find_nav">
	    <div class="find_nav_left">
	        <div class="find_nav_list">
	            <ul>
	                <li class="selected"><a href="javascript:void(0)" url="${contextPath}/exhibition/index.do">展览</a></li>
	                <li><a href="javascript:void(0)" url="${contextPath}/exhibitionHome/index.do">展厅</a></li>
	                <li><a href="javascript:void(0)" url="${contextPath}/production/index.do">作品</a></li>
	                <li><a href="javascript:void(0)" url="${contextPath}/image/index.do">图片</a></li>
	                <li><a href="javascript:void(0)" url="${contextPath}/user/index.do">用户</a></li>
        	        <li><a href="javascript:void(0)" url="${contextPath}/banner/index.do">banner</a></li>
	                <li class="sideline"></li>
	            </ul>
	        </div>
	    </div>
	</div>
	<div id="content" style="width: 100%; position: absolute;top: 45px;">
		<div class="easyui-layout" style="width:100%;height:100%;">
			<div data-options="region:'west',split:true" title="分类" style="width:25%">
				<div class="easyui-panel" title=" " data-options="tools:'#categoryTools', border:false, iconCls:'icon-blank'" style="width: 100%; padding: 5px">
					<ul id="tree" class="easyui-tree" data-options="url:'${contextPath}/category/list.do',method:'get',animate:true,border:false"></ul>
				</div>
			</div>
			
			<div data-options="region:'center',title:'展览'">
				<table id="exhibitionTable" class="easyui-datagrid" style="width:100%;height:100%;"
					data-options="rownumbers:true, singleSelect:true, url:'${contextPath}/exhibition/listJson.do',method:'get', toolbar:'#exhibitionTB' " >
					<thead>
						<tr>
							<th data-options="field:'ck', checkbox:true"></th>
							<th data-options="field:'name', width:'10%' ">名称</th>
							<th data-options="field:'score', width:'5%'">评分</th>
							<th data-options="field:'commentCount', width:'5%'">评论人数</th>
							<th data-options="field:'authors', width:'5%'">作者群体</th>
							<th data-options="field:'createTime', width:'10%' " formatter ="dateTimeFormatter">创建时间</th>
							<th data-options="field:'beginTime', width:'10%' " formatter ="dateTimeFormatter">开始时间</th>
							<th data-options="field:'endTime', width:'10%' " formatter ="dateTimeFormatter">结束时间</th>
							<th data-options="field:'address', width:'10%'">地址</th>
							<th data-options="field:'logo', width:'5%'">图标</th>
							<th data-options="field:'flag', width:'5%'">标签</th>
							<th data-options="field:'description', width:'10%'">描述</th>
							<th data-options="field:'categorysStr', width:'5%'">所属分类</th>
							<th data-options="field:'zindex', width:'5%'">序列号</th>
							<th data-options="field:'visible', width:'5%'">首页显示</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
		
		<div id="categoryTools">
			<a href="#" iconCls="icon-reload" onclick="$('#tree').tree('reload');"></a>
			<a href="#" iconCls="icon-add" onclick="$('#addCategoryWin').window('open'); $('#parent').combotree('reload');"></a>
			<a href="#" iconCls="icon-remove" onclick="deleteCategory()"></a>
		</div>
		
		<div id="exhibitionTB">
			<a href="#" class="easyui-linkbutton" iconCls="icon-sum" plain="true" onclick="$('#exhibitionTable').datagrid('reload')">查询所有</a>
         	<span class="datagrid-btn-separator" style="vertical-align: middle;display:inline-block;float:none"></span>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="openAddExhibitionWin()">添加</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="openUpdateExhibitionWin()">编辑</a>
			<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeExhibition()">删除</a>
		</div>
		
		<div id="addCategoryWin" class="easyui-window" title="添加分类" data-options="iconCls:'icon-add', collapsible:'false', modal:'true', closed:true, footer:'#addCategoryWinFooter'" style="width:400px; height:230px; padding:10px;" >
			<div style="margin-bottom:5px">
				<!-- <input class="easyui-textbox" data-options="label: '父节点：', labelPosition:'before', editable:false" id="parent" style="width: 100%;"/> -->
				<select class="easyui-combotree" id="parent" style="width:100%;" data-options="label: '父节点：', labelPosition:'before', url:'${contextPath}/category/list.do',method:'get'"></select>
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-textbox" data-options="label: '分类名称：', labelPosition:'before'" id="categroyName" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-textbox" data-options="label: '描述：', labelPosition:'before'" id="description" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<div style="width: 84px; height: 100%;float: left; vertical-align: middle;">是否推荐到首页：</div>
				<input class="easyui-switchbutton" id="hot" data-options="onText:'yes', offText:'no'" >
			</div>
		</div>
		
		<div id="addCategoryWinFooter" class="windowFooter">
			<a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="addCategory()">确定</a>  
            <a href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="$('#addCategoryWin').window('close')">取消</a>  
		</div>
		
		<!-- ##############下面是添加展览相关的窗体############## -->
		<div id="addExhibitionWin" class="easyui-window" title="添加展览" data-options="iconCls:'icon-add', collapsible:'false', modal:'true', closed:true, footer:'#addExhibitionWinFooter'" style="width:450px; height:550px; padding:10px;" >
			<div style="margin-bottom:5px">
				<input id="id" name="id" hidden="hidden"/>
				<select class="easyui-combotree" id="category" style="width:100%;" data-options="label: '分类：', labelPosition:'before', url:'${contextPath}/category/list.do',method:'get', multiple:true, cascadeCheck:false"></select>
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-textbox" data-options="label: '展览名称：', labelPosition:'before'" id="exhibitionName" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-textbox" data-options="label: '作者群体：', labelPosition:'before'" id="authors" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-textbox" data-options="label: '地址：', labelPosition:'before'" id="address" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-textbox" data-options="label: '描述', labelPosition:'before', multiline:'true', height:'80'" id="exhibitionDescription" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-textbox" data-options="label: '标签', labelPosition:'before'" id="flag" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-datetimebox" data-options="label: '开始时间', labelPosition:'before'" id="beginTime" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-datetimebox" data-options="label: '结束时间', labelPosition:'before'" id="endTime" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-filebox" id="logo" style="width:100%;" data-options="label:'logo：', labelPosition:'before', buttonText:'请选择...' ">
			</div>
			<div style="margin-bottom:5px">
				<input class="easyui-numberspinner" id="zindex" data-options="label: '排序号：', labelPosition:'before', min:0, max:999" style="width: 100%;"/>
			</div>
			<div style="margin-bottom:5px">
				<div style="width: 84px; height: 100%;float: left; vertical-align: middle;">首页显示：</div>
				<input class="easyui-switchbutton" id="visible" data-options="onText:'yes', offText:'no'" >
			</div>
			
		</div>
		
		<div id="addExhibitionWinFooter" class="windowFooter">
			<a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="addExhibition()">确定</a>  
            <a href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="$('#addExhibitionWin').window('close')">取消</a>  
		</div>
		
		<!-- ##############显示图片的窗口############## -->
		<div id="showImgWin" class="easyui-window" title="图片预览" data-options="iconCls:'icon-add', collapsible:'false', modal:'true', closed:true, footer:'#showImgWinFooter'" style="width:500px; height:500px; padding:10px;" >
			<div style="width: 100%; height: 100%;">
				<img id="img" alt="" src="" />
			</div>
		</div>
		<div id="showImgWinFooter" class="windowFooter">
            <a href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="$('#showImgWin').window('close')">取消</a>  
		</div>
	</div>
</body>


</html>